BabylonJS-এ অ্যানিমেশন পরিচালনা করার জন্য বিভিন্ন উন্নত পদ্ধতি রয়েছে। এর মধ্যে Blending এবং Easing Functions দুটি অত্যন্ত গুরুত্বপূর্ণ এবং শক্তিশালী কৌশল। এই কৌশলগুলো ব্যবহার করে আপনি আরো বাস্তবসম্মত এবং আকর্ষণীয় অ্যানিমেশন তৈরি করতে পারবেন।
এই টিউটোরিয়ালে আমরা Blending এবং Easing Functions সম্পর্কে বিস্তারিতভাবে আলোচনা করব এবং কিভাবে এগুলো ব্যবহার করা যায়, সেটি দেখাবো।
১. Animation Blending
Animation Blending হলো একাধিক অ্যানিমেশনের মধ্যে মসৃণ পরিবর্তন করার প্রক্রিয়া। যখন এক অ্যানিমেশন শেষ হয় এবং পরবর্তী অ্যানিমেশন শুরু হয়, তখন blending এর মাধ্যমে সেগুলোর মধ্যে একটি মসৃণ সংমিশ্রণ (transition) তৈরি করা হয়। এটি বিশেষভাবে 3D চরিত্র বা অবজেক্টের জন্য গুরুত্বপূর্ণ, যেখানে চরিত্রের অবস্থান বা অ্যাকশন একটি অ্যানিমেশন থেকে অন্য অ্যানিমেশনে পরিবর্তিত হয়।
Blending এর পদ্ধতি
BabylonJS-এ AnimationGroup ব্যবহার করে একাধিক অ্যানিমেশন একসাথে blend করা যায়।
উদাহরণ: Animation Blending
ধরা যাক, আমরা একটি ক্যারেক্টার বা অবজেক্টকে ঘুরাতে চাই, এবং একই সাথে তার স্কেল বা আকারও পরিবর্তন করতে চাই। চলুন দেখি কিভাবে blending করা যায়:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Blending Example</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
<canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
<script>
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
// প্রথম অ্যানিমেশন: রোটেশন
var rotationAnimation = new BABYLON.Animation("rotation", "rotation.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
var keyFrames = [];
keyFrames.push({ frame: 0, value: 0 });
keyFrames.push({ frame: 100, value: Math.PI * 2 });
rotationAnimation.setKeys(keyFrames);
// দ্বিতীয় অ্যানিমেশন: স্কেল পরিবর্তন
var scaleAnimation = new BABYLON.Animation("scale", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
var scaleKeyFrames = [];
scaleKeyFrames.push({ frame: 0, value: 1 });
scaleKeyFrames.push({ frame: 100, value: 2 });
scaleAnimation.setKeys(scaleKeyFrames);
// AnimationGroup তৈরি করা
var animationGroup = new BABYLON.AnimationGroup("group");
animationGroup.addTargetedAnimation(rotationAnimation, box);
animationGroup.addTargetedAnimation(scaleAnimation, box);
// blending এর জন্য একটি প্যারামিটার সেট করা
animationGroup.start(true, 1.0, 0, 100); // blend time (transition time) 100 ফ্রেমের মধ্যে হবে
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- এখানে rotationAnimation এবং scaleAnimation দুটি আলাদা অ্যানিমেশন তৈরি করা হয়েছে, একটি বক্সের জন্য রোটেশন এবং অন্যটি স্কেল পরিবর্তন করার জন্য।
- AnimationGroup ব্যবহার করে এই দুটি অ্যানিমেশন একসাথে blend করা হয়েছে।
animationGroup.start(true, 1.0, 0, 100);এই লাইনের মাধ্যমে blending এর জন্য সময় নির্ধারণ করা হয়েছে, যেখানে1.0হলো blending স্পিড এবং100হলো অ্যানিমেশন সম্পূর্ণ হওয়ার সময়।
এই ধরনের blending আপনাকে একাধিক অ্যানিমেশনের মধ্যে মসৃণ পরিবর্তন করতে সাহায্য করবে।
২. Easing Functions
Easing Functions ব্যবহার করে অ্যানিমেশনকে আরো মসৃণ এবং প্রকৃত অনুভূতি দেওয়া যায়। সাধারণত, একটি সোজা লিনিয়ার অ্যানিমেশন থাকে, যা সরাসরি শুরু থেকে শেষ পর্যন্ত চলে। তবে easing functions আপনাকে অ্যানিমেশনকে শুরুর দিকে ধীরে, মাঝখানে দ্রুত এবং শেষে আবার ধীরে চলতে সাহায্য করে। এটি অ্যানিমেশনকে আরো প্রকৃত এবং জীবন্ত মনে হয়।
Easing Functions এর প্রকার:
- LinearEase: সরল এবং সোজা অ্যানিমেশন।
- EaseInBounce: শুরুতে ধীরে, পরবর্তীতে দ্রুত এবং শেষে বাউন্স।
- EaseOutElastic: শেষের দিকে ইলাস্টিক মুভমেন্ট।
- EaseInOutCubic: শুরু এবং শেষের দিকে ধীরে, মাঝখানে দ্রুত।
উদাহরণ: Easing Function ব্যবহার
এখানে আমরা EaseInOutCubic easing function ব্যবহার করবো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Easing Functions Example</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
<canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
<script>
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
// রোটেশন অ্যানিমেশন তৈরি করা
var rotationAnimation = new BABYLON.Animation("rotation", "rotation.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
var keyFrames = [];
keyFrames.push({ frame: 0, value: 0 });
keyFrames.push({ frame: 100, value: Math.PI * 2 });
rotationAnimation.setKeys(keyFrames);
// Easing Function যোগ করা
rotationAnimation.setEasingFunction(new BABYLON.EaseInOutCubic());
// অ্যানিমেশন চালু করা
box.animations.push(rotationAnimation);
scene.beginAnimation(box, 0, 100, true);
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- এখানে একটি রোটেশন অ্যানিমেশন তৈরি করা হয়েছে এবং তার মধ্যে EaseInOutCubic easing function যোগ করা হয়েছে। এর মাধ্যমে রোটেশনটি শুরুতে ধীরে, মাঝখানে দ্রুত এবং শেষে আবার ধীরে হবে।
setEasingFunction()মেথড ব্যবহার করে easing function সেট করা হয়েছে, যা অ্যানিমেশনকে আরো প্রকৃত অনুভূতি দেয়।
সারাংশ
- Animation Blending: একাধিক অ্যানিমেশনের মধ্যে মসৃণ পরিবর্তন করতে ব্যবহৃত হয়। BabylonJS-এ
AnimationGroupব্যবহার করে একাধিক অ্যানিমেশনকে blend করা সম্ভব। - Easing Functions: অ্যানিমেশনকে আরও বাস্তবসম্মত করতে easing functions ব্যবহার করা হয়। এটি অ্যানিমেশনকে সহজ এবং সুন্দরভাবে শুরু ও শেষ করতে সাহায্য করে। BabylonJS-এ বিভিন্ন easing function যেমন
EaseInOutCubic,LinearEaseইত্যাদি ব্যবহার করা যেতে পারে।
এই উন্নত অ্যানিমেশন কৌশলগুলো ব্যবহার করে আপনি আপনার প্রজেক্টে আরো আকর্ষণীয় এবং বাস্তবসম্মত অ্যানিমেশন তৈরি করতে পারবেন।
Read more
